<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <script src="./lib/vue.min.js"></script>
    <link rel="stylesheet"
        href="./lib/vant@2.12.54_lib_index.css">
    <link rel="stylesheet"
        href="./styles/vant.css" />
    <script src="./lib/vant@2.12.54_lib_vant.min.js"></script>
    <script src="./lib/axios-0.18.0.js"></script>
    <script src="./http/request.js"></script>
    <title>代跑跑</title>
    <style>
        .main {
            padding: 16px;
        }

        .sub-section {
            background-color: #fff;
            border-radius: 10px;
        }

        .image-box {
            width: 100%;
            height: 20vh;
        }

        .rule-box {
            color: #666;
            /* text-align: center; */
        }

        .rule-box h3 {
            text-align: center;
        }

        .rule-box p {
            font-size: 14px;
            line-height: 20px;
        }

        .van-field {
            align-items: center;
            border-radius: 10px;
        }

        .margin-bottom--small {
            margin-bottom: 10px;
        }

        .van-icon:before {
            color: var(--van-primary);
        }

        .slogan-box {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .containter {
            color: #5dcef3;
            font: 28px sans-serif;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 顶部导航栏 -->
        <van-nav-bar title="邀请有礼">
            <template v-slot:left>
                <van-icon name="arrow-left"
                    size="20"
                    color="#555"
                    @click="exit"></van-icon>
            </template>
        </van-nav-bar>
        <article class="main">
            <section class="image-box margin-bottom--small">
                <van-image width="100%"
                    height="100%"
                    radius="10px"
                    fit="cover"
                    src="./img/invite2.png"></van-image>
            </section>
            <section class="slogan-box margin-bottom--small">
                <div class="containter">
                    <span>*邀请好友, 得优惠券*</span>
                </div>
            </section>
            <section class="sub-section margin-bottom--small">
                <van-grid :column-num="2"
                    icon-size="60px">
                    <van-grid-item icon="gift-o"
                        text="你可获得三张 0.89 元优惠券"></van-grid-item>
                    <van-grid-item icon="point-gift-o"
                        text="好友可享 0.01 元代取快递"></van-grid-item>
                </van-grid>
            </section>
            <section class="sub-section margin-bottom--small">
                <van-field v-model="code"
                    label="我的邀请码:">
                    <template #extra>
                        <van-button size="normal"
                            type="primary"
                            @click="copyCode">复制</van-button>
                    </template>
                </van-field>
                <div style="text-align: center;line-height: 32px; color: #666;">记得发给好友哦~~~</div>
            </section>
            <section class="rule-box">
                <h3>活动规则</h3>
                <div style="width: 85% ;margin:0 auto;">
                    <p>1.被邀请的新用户授权下单后，邀请者即可获得优惠券。</p>
                    <p>2.邀请码只能用三次哦。</p>
                    <p>3.获得优惠券后可到个人中心/卡券进行查看，下单时选择即可使用。</p>
                </div>
            </section>
        </article>
        <!-- 活动规则 -->
    </div>

    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    code: ""
                }
            },
            mounted() {
                axios({
                    methods: 'GET',
                    url: '/user/invite/code'
                }).then(res => {
                    this.code = res.data.pass
                    vant.Toast({
                        message: `邀请码还可使用${res.data.count}次`
                    })
                })
            },
            methods: {
                //左上角按钮推出当前页面
                exit() {
                    location.href = "./home.html?flag=0"
                },
                //复制邀请码
                copyCode() {
                    const input = document.querySelector('.van-field__control')
                    input.select()
                    input.setSelectionRange(0, input.value.length)
                    document.execCommand('copy')
                    vant.Toast({
                        message: '复制成功'
                    })
                }
            }
        })
    </script>
</body>

</html>